<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>钟表</title>
		<style id="css">@import url("./css/clock_css.css");</style>
	</head>

	<body>
		<div id="wrap">
			<ul id="list">
				<li></li>
				<li></li>
			</ul>
			<div id="hour"></div>
			<div id="min"></div>
			<div id="sec"></div>
			<div class="icon"></div>
		</div>
		<script src="./js/clock_js.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script>
			var oList = document.getElementById("list"); //获取到刻度
			var oCss = document.getElementById("css");
			var oHour = document.getElementById("hour"); //获取时针
			var oMin = document.getElementById("min"); //获取分针
			var oSec = document.getElementById("sec"); //获取秒针
			var oLi = "";
			var sCss = "";
			for (var i = 0; i < 60; i++) { //一个表盘总共是60个刻度
				sCss += "#wrap ul li:nth-of-type(" + (i + 1) + "){-webkit-transform: rotate(" + i * 6 + "deg);}";
				oLi += "<li></li>";
			};
			oList.innerHTML = oLi;
			oCss.innerHTML += sCss; //表盘刻度渲染完成
			toTime();
			setInterval(toTime, 1000);

			function toTime() {
				var oDate = new Date(); //获取当前时间
				var iSec = oDate.getSeconds(); //获取当前秒
				var iMin = oDate.getMinutes() + iSec / 60; //获取当前分
				var iHour = oDate.getHours() + iMin / 60; //获取当前时
				oSec.style.WebkitTransform = "rotate(" + iSec * 6 + "deg)"; //秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
				oMin.style.WebkitTransform = "rotate(" + iMin * 6 + "deg)"; //分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
				oHour.style.WebkitTransform = "rotate(" + iHour * 30 + "deg)"; //时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
			};
		</script> -->
	</body>
</html>
